<template>
	<view class="content">
		<view class="information">
			<view class="left">
				<view class="s_time font48">
					{{date}}
				</view>
				<view class="n_date">
					<view class="week font28">
						{{weekDay}}
					</view>
					<view class="day font30">
						{{n_date}}
					</view>
				</view>
			</view>
			<!-- <view class="workTime font28">
				{{new_day}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{workTime}}
			</view> -->
			<!-- <view class="stept">
				<y-steps :stepList="stepList"></y-steps>
			</view> -->
			<!-- <view class="location">
				<view class="icon">
					<image src="https://wx.caobenjiankang.com/image/technicianadd/ladd.png" mode="aspectFit"></image>
				</view>
				<view class="title font28">
					{{address}}
				</view>
				<view class="image" @click="getAdds">
					<image src="https://wx.caobenjiankang.com/image/technicianadd/s.png" mode="aspectFit"></image>
				</view>
			</view> -->
			<view class="font36 fontw" style="margin-bottom: 16rpx;color: red;">
				打卡狀態:{{value}}
			</view>
			<camera device-position="front" flash="off" @error="error" style="width: 100%; height: 400px;"
				v-if="src == ''"></camera>
			<image mode="widthFix" :src="src" style="width: 100%;" v-if="src != ''"></image>
			<view class="" style="    display: flex;
    align-items: center;
    justify-content: center;margin-top: 168rpx;">
				<view class="btn font30 fontw" @click="takePhoto" :style="!is_info?'background:#dddddd':''">
					{{tips}}
				</view>
				<view class="btn font30 fontw" @click="daka" :style="!is_info?'background:#dddddd':''">
					{{text}}打卡
				</view>
			</view>
		</view>
		<view class="dai font28 fontw" v-if="list.length > 0">
			待服务
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="image">
					<image :src="item.order_goods[0].goods_cover" mode="aspectFit"></image>
				</view>
				<view class="info">
					<view class="title font30 fontw">
						{{item.order_goods[0].goods_name}}
					</view>
					<!-- <view class="tabs">
						<view class="items font22" v-for="(items,indexs) in item.tabs" :key="indexs">
							{{indexs+1 == item.tabs.length?`${items}`:`${items}` + ' | '}}
						</view>
					</view> -->
					<view class="left">
						<view class="n_price font30 fontw">
							<text class="font22">￥</text>{{item.order_goods[0].true_price}}
						</view>
						<view class="o_price font22">
							￥{{item.order_goods[0].price}}
						</view>
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/technicianadd/sz.png" mode="aspectFit"></image>
						</view>
						<view class="time font22">
							{{item.order_goods[0].time_long}}分钟
						</view>
					</view>
				</view>
				<view class="s_time">
					<view class="text font22">
						{{item.start_time.split(' ')[1]}}
					</view>
					<view class="tips font18" v-if="getDate(item.start_time)">
						时间快到啦
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import YSteps from '@/technicianadd/components/MarsXHChang-YSteps/YSteps.vue'
	export default {
		components: {
			YSteps
		},
		data() {
			return {
				tips: '点击拍照',
				text: '',
				date: '',
				n_date: '',
				weekDay: '',
				new_day: '',
				address: '',
				workTime: '09:30-23:30',
				intervalId: null,
				lat: '',
				lng: '',
				stepList: [{
						date: '09:16', // 左侧日期 -- 必选
						add: '', // 左侧时间 -- 必选
						info: '上班', // 右侧内容 -- 可选
						isFinished: true, // 是否已完成（完成 index 为 √）-- 可选
						isActive: false, // 是否为当前节点 Active（当前节点 即使完成 index 也不会显示 √）-- 可选
						isShowSlot: false, // 右侧是否有 Slot（显示在 右侧内容下方）-- 可选
						fris: true,
					},
					{
						date: '23:32',
						add: '',
						info: '下班',
						isFinished: true,
						isActive: true,
						isShowSlot: true,
					}
				],
				list: [],
				page: 1,
				last_page: 1,
				is_info: true,
				is_add: true,
				src: '',
				value:'',
				header: {
					autograph: ''
				}, 
				action: "https://wx.caobenjiankang.com/index.php?i=666&m=longbing_massages_city&s=admin/app/wx/uploadFile&urls=store/apadmin/app/wx/uploadFile",
			};
		},
		onReachBottom() {
			if (this.page >= this.last_page) {
				uni.showToast({
					icon: 'error',
					title: '暂无更多',
					duration: 1000
				})
			} else {
				this.page = this.page + 1
				this.getData()
			}
		},
		onLoad() {
			this.getCurrentTime();
			this.getWeek()
			this.getInfo()
			this.intervalId = setInterval(() => {
				this.getCurrentTime();
			}, 1000);
			this.getData()
			const au = uni.getStorageSync('autograph')
			this.header.autograph = au
		},
		onUnload() {
			this.onBack();
		},
		methods: {
			async getInfo() {
				const data = await this.$api.technicianadd.checkSignIn()
				console.log(data);
				this.value = data.text
				if (data.text == '今日已完成打卡') {
					this.is_info = false
					this.stepList[0].date = uni.$u.timeFormat(data.start_work.create_time, 'hh:MM');
					this.stepList[1].date = uni.$u.timeFormat(data.end_wotk.create_time, 'hh:MM');
				}
				if (data.text == '今日未打卡上班') {
					this.text = '上班'
					this.is_add = false
				}
				if (data.text == '今日未打卡下班') {
					this.text = '下班'
					this.is_add = true
					// this.src = data.start_work.image
					this.src = ''
					this.tips = '点击拍照'
				}
			},
			getDate(time) {
				const systemSetting = uni.getDeviceInfo()
				if (systemSetting.system.split(' ')[0] == 'iOS') {
					// 在这里编写在iOS环境下需要执行的代码
					const isoDate = time.replace(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2})$/, '$1-$2-$3T$4:$5:00Z');
					var timestamp = new Date(isoDate).getTime()
				} else {
					// 在这里编写在非iOS环境下需要执行的代码
					var timestamp = new Date(time).getTime()
				}
				const now = new Date();
				const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1);
				const diff = nextHour - timestamp;
				return diff < 1800000
			},
			async getData() {
				const data = await this.$api.technicianadd.orderList({
					page: this.page,
					pay_type: 5
				})
				this.last_page = data.last_page
				this.list = data.data
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.date = `${hours}:${minutes}:${seconds}`;
			},
			getWeek() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const dayOfWeek = now.getDay();
				let weekDay;
				let new_day
				switch (dayOfWeek) {
					case 0:
						weekDay = '星期日';
						new_day = '周日'
						break;
					case 1:
						weekDay = '星期一';
						new_day = '周一'
						break;
					case 2:
						weekDay = '星期二';
						new_day = '周二'
						break;
					case 3:
						weekDay = '星期三';
						new_day = '周三'
						break;
					case 4:
						weekDay = '星期四';
						new_day = '周四'
						break;
					case 5:
						weekDay = '星期五';
						new_day = '周五'
						break;
					case 6:
						weekDay = '星期六';
						new_day = '周六'
						break;
				}
				this.weekDay = weekDay
				this.new_day = new_day
				this.n_date = `${year}-${month}-${day}`;
			},
			onBack(op) {
				// 处理页面返回事件，清除定时器
				if (this.intervalId) {
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
			},
			takePhoto() {
				let that = this
				if (this.tips == '点击重拍') {
					this.src = ''
					this.tips = '点击拍照'
				} else {
					if(!this.is_info) return
					const ctx = uni.createCameraContext();
					ctx.takePhoto({
						quality: 'high',
						success: (res) => {
							uni.uploadFile({
								url: that.action, //图片上传post请求的地址
								filePath: res.tempImagePath,
								name: "file",
								header: that.header,
								formData: {
									type: 'picture'
								},
								success: (uploadFileRes) => {
									that.src = JSON.parse(uploadFileRes.data).data.attachment_path
									that.tips = '点击重拍'
								},
								fail: (error) => {
									uni.hideLoading()
								}
							});
						}
					});
				}
			},
			async daka() {
				let that = this
				//if(!this.is_info) return
				if (that.src == '') {
					uni.showToast({
						icon:'error',
						title:'请拍照后上传打卡',
						duration:1000
					})
					return
				}
				const data = await this.$api.technicianadd.coachSignInSubmit({
					image: that.src
				})
				uni.showToast({
					icon: 'success',
					title: data,
					duration:500
				})
				setTimeout(function(){
					// const pages = getCurrentPages()
					// if (pages.length > 1) {
					// 	uni.navigateBack(1);return;
					// }else{
					// 	uni.reLaunch({url: "/pages/mine?type=1"})
					// }
					this.src = ''
					that.getInfo()
				},500)
				
				
			},
			error(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 28rpx 37rpx;

		.information {
			background-color: #fff;
			box-shadow: 0rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 53rpx;
			padding: 48rpx 45rpx 40rpx 38rpx;

			.left {
				justify-content: space-between;
				margin-bottom: 68rpx;

				.s_time {}

				.n_date {
					.week {
						text-align: right;
						color: #666666;
					}

					.day {
						color: #666666;
					}
				}
			}

			.workTime {
				margin-bottom: 56rpx;
				color: #666666;
			}

			.stept {
				margin-bottom: 104rpx;
			}

			.location {
				display: flex;
				align-items: center;
				margin-bottom: 97rpx;

				.icon {
					width: 20rpx;
					height: 26rpx;
					display: flex;
					align-items: center;

					image {
						width: 20rpx;
						height: 26rpx;
					}
				}

				.title {
					color: #333333;
					margin: 0 8rpx;
				}

				.image {
					width: 21rpx;
					height: 18rpx;
					display: flex;
					align-items: center;

					image {
						width: 21rpx;
						height: 18rpx;
					}
				}
			}

			.btn {
				width: 150rpx;
				height: 150rpx;
				background: linear-gradient(180deg, #82D592 0%, #32BA85 100%);
				border-radius: 50%;
				color: #FFFFFF;
				line-height: 150rpx;
				text-align: center;
				margin: 0 auto;
			}
		}

		.dai {
			margin-top: 29rpx;
			margin-bottom: 19rpx;
		}

		.list {
			padding: 31rpx 22rpx;

			.item {
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;

				.image {
					width: 169rpx;
					height: 169rpx;
					background: #F3A8B5;
					border-radius: 21rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 169rpx;
						height: 169rpx;
					}
				}

				.info {
					flex: 1;

					.title {
						color: #333333;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 27rpx;
					}

					.tabs {
						display: flex;
						align-items: center;
						margin-bottom: 27rpx;

						.items {
							color: #666666;
						}
					}

					.left {
						align-items: flex-end;

						.n_price {
							color: #FF4A00;
							margin-right: 9rpx;
						}

						.o_price {
							color: #333333;
							margin-right: 9rpx;
							text-decoration: line-through;
						}

						.icon {
							width: 26rpx;
							height: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.time {
							color: #333333;
						}
					}
				}

				.s_time {
					.text {
						width: 142rpx;
						height: 43rpx;
						background: linear-gradient(0deg, #2AB883 0%, #89D894 100%);
						border-radius: 20rpx;
						color: #FFFFFF;
						line-height: 43rpx;
						text-align: center;
					}

					.tips {
						color: #FF6000;
						text-align: center;
					}
				}
			}
		}
	}
</style>